<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>UI Menu Tests</title>
		
		<style type="text/css">
			@import url(../../../themes/ui/ui.menu.css);
			@import url(../../../themes/light/light.css);
			@import url(../../../themes/light/light.menu.css);
			@import url(../../../themes/dark/dark.css);
			@import url(../../../themes/dark/dark.menu.css);
			@import url(../../../themes/tango/tango.menu.css);
			body { font:10pt Calibri, Arial, sans-serif; margin:10px 20px;}
			.filePrint {background: url('images/printer.png') no-repeat center left; padding-left: 16px;}
			
			.light .toggle a { color:#222; }
  			.dark  .toggle a { color:snow; }
			.toggle { margin:0; padding: 0; clear:right; float: right; }
			.toggle li { font:11pt Verdana; margin:0; padding: 0; width: 5em; display: block; margin-bottom: 0.3em; }
			.toggle li a { color: black; display: block; border: 1px solid gray; font:11pt Verdana; text-align:center; text-decoration:none; }
			.toggle li a.selected { background: gray; color: white; }
			.toggle li a:focus { outline: 1px dotted blue; }
		</style>
		
    <script type="text/javascript" src="../../../jquery/src/core.js"></script>
    <script type="text/javascript" src="../../../jquery/src/selector.js"></script>
    <script type="text/javascript" src="../../../jquery/src/event.js"></script>
    <script type="text/javascript" src="../../../jquery/src/ajax.js"></script>
    <script type="text/javascript" src="../../../jquery/src/fx.js"></script>
	<script type="text/javascript" src="../../../jquery/src/offset.js"></script>
	<script type="text/javascript" src="../../../../branches/tane-dev/jquery.hoverIntent.js"></script>
	<script type="text/javascript" src="../ui.menu.js"></script>
	</head>
	<body class="light">
		
		<script type="text/javascript">
			$('document').ready(function(){
				$('#filemenu-parent').menu({
					menu: '#filemenu',
					buttons: {
						fileExit : function(){
							var toexit = confirm('Are you sure you want to exit');
							if (toexit == true){
								alert('This would close the screen');
								return false;
							}
						},
						filePrint : function(){
							print();
							return false;
						},
						fileSave : function(){
							$('#filemenu-save').menuItemDisable({
							menuItemDisabled: function(ev, ui){
								alert($(ui.item).text());
							}});
							return false;
						},
						fileNewDocument : function(){
							alert('New Document');
							return false;
						}
					}
				});
				
				$('#editmenu-parent').menu({
					menu: '#editmenu',
					trigger: 'hover',
					buttons: {
						fileCopy : function(){
							alert('Text Copied');
							return false;
						}
					},
					hovers : {
						colorPicker : function(){
							alert('Color Picker');
							return false;
						}
					}
				});
				
				$('table').menu({
					menu: '#contextMenu',
					trigger: 'contextmenu',
					buttons : {
						contextEditField : function(ev, ui){
						  $(ui).html('<input type="text" value="'+ $(e).text() +'" />').find('input').blur(function() {
						    $(this).parent().html($(this).val());
							return false;
						  });
						},
						contextClearField : function(ev, ui){
							$(ev.target).text('');
							return false;
						}
					}
				});
				
				$('.addMenuItem').bind('click', function(){
					$('#editmenu-paste').menuItemAdd({id: 'editmenu-pastespecial', href: '#', linkclass: 'editPasteSpecial', linktext: 'Paste Special', buttons:{editPasteSpecial: function(){ alert('Paste Special'); } } });
					return false;
				})
				
				$('.enableSave').bind('click', function(){
					$('#filemenu-save').menuItemEnable({
						menuItemEnabled : function(ev, ui){
							alert('Save Activated');
						}
					});
					return false;
				})
				
							$('#toggle-theme-none').click(function() {
			    $('.toggle a').removeClass('selected');
			    $(this).addClass('selected');
			    $("body").removeClass("dark").removeClass("tango").removeClass("light");
			    return false;
			});

		  $('#toggle-theme-light').click(function() {
		    $('.toggle a').removeClass('selected');
		    $(this).addClass('selected');
		    $("body").removeClass("dark").removeClass("tango").addClass("light");
		    return false;
		  });
		
		  $('#toggle-theme-dark').click(function() {
		    $('.toggle a').removeClass('selected');
		    $(this).addClass('selected');
		    $("body").removeClass("light").removeClass("tango").addClass("dark");
		    return false;
		  });
		
		  $('#toggle-theme-tango').click(function() {
		    $('.toggle a').removeClass('selected');
		    $(this).addClass('selected');
		    $("body").removeClass("light").removeClass("dark").addClass("tango");
		    return false;
		  }).click();
			});
			
			function testCallback(){
				alert ('Callback Fired');
			}			
		</script>
		
		<ul class="toggle">
  			<li><a href="#" id="toggle-theme-none">none</a></li>
  			<li><a href="#" id="toggle-theme-light">light</a></li>
  			<li><a href="#" id="toggle-theme-dark">dark</a></li>
  			<li><a href="#" id="toggle-theme-tango">tango</a></li>
		</ul>
		
		<h2>Toolbar Test</h2>
		<ul id="mytoolbar" class="ui-menu-toolbar">
			<li id="filemenu-parent" class="ui-menu-toolbar-button"><a href="#" class="toolbarFile">File</a>
				<ul id="filemenu">
					<li id="filemenu-new"><a href="#" class="fileNew">New</a>
						<ul>
							<li id="filemenu-newdoc"><a href="#" class="fileNewDocument">Document</a></li>
							<li id="filemenu-newimg"><a href="#" class="fileNewImage">Image</a></li>
						</ul>
					</li>
					<li id="filemenu-open"><a href="#" class="fileOpen">Open</a></li>
					<li id="filemenu-save"><a href="#" class="fileSave">Save</a></li>
					<li id="filemenu-print"><a href="#" class="filePrint">Print</a></li>
					<li id="filemenu-properties"><a href="#" class="fileProperties">Properties</a>
						<ul>
							<li id="filemenu-properties-new"><a href="#" class="filePropertiesNew">New</a></li>
							<li id="filemenu-properties-edit"><a href="#" class="filePropertiesEdit">Edit</a></li>
							<hr />
							<li id="filemenu-properties-show"><a href="#" class="filePropertiesShow">Show</a>
							<ul>
								<li id="filemenu-properties-show-current"><a href="#" class="filePropertiesShowCurrent">Current</a></li>
								<li id="filemenu-properties-show-current"><a href="#" class="filePropertiesShowRevisions">Revisions</a></li>
							</ul>
							</li>
						</ul>
					</li>
				<li id="filemenu-exit"><a href="#" class="fileExit">Exit</a></li>
				</ul>
			</li>
			<li id="editmenu-parent" class="ui-menu-toolbar-button"><a href="#" class="toolbarEdit">Edit</a>
				<ul id="editmenu">
					<li id="editmenu-cut"><a href="#" class="fileCut">Cut</a></li>
					<li id="editmenu-copy"><a href="#" class="fileCopy">Copy</a></li>
					<li id="editmenu-paste"><a href="#" class="filePaste">Paste</a></li>
					<hr />
					<li id="editmenu-color"><a href="#" class="colorPicker">Pick Colour</a></li>
				</ul>
			</li>
		</ul>
		<br style="clear:both;" />
		
		<a href="#" class="addMenuItem">Add Paste Special</a>
		<a href="#" class="enableSave">Enable Save Menu</a>
		
		<ul id="contextMenu">
			<li id="context-edit"><a href="#" class="contextEditField">Edit</a></li>
			<li id="context-delete"><a href="#" class="contextClearField">Clear</a></li>
		</ul>
		
		<h2>Context Test</h2>
		<table>
			<caption>Test Table</caption>
			<thead>
				<tr>
					<th>Name</th>
					<th>Profession</th>
					<th>Salary ($)</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Tane Piper</td>
					<td>Web Developer</td>
					<td>1,000,000</td>
				</tr>
				<tr>
					<td>John Smith</td>
					<td>Gardener</td>
					<td>20,000</td>
				</tr>
				<tr>
					<td>Jane Doe</td>
					<td>Session Musician</td>
					<td>40,000</td>
				</tr>
			</tbody>
			</thead>
		</table>		
	</body>
</html>
